<!doctype html>
<html class="theme-next   use-motion ">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"/>




  <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">



<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=0.4.5.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Android,Lechance, Machine Learning, Data Mining, Java, Microsoft" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=0.4.5.2" />






<meta name="description" content="The code to change the world">
<meta property="og:type" content="website">
<meta property="og:title" content="Lechance's Blog">
<meta property="og:url" content="https://lechance.github.io/page/5/index.html">
<meta property="og:site_name" content="Lechance's Blog">
<meta property="og:description" content="The code to change the world">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Lechance's Blog">
<meta name="twitter:description" content="The code to change the world">



<script type="text/javascript" id="hexo.configuration">
  var CONFIG = {
    scheme: '',
    sidebar: 'hide',
    motion: true
  };
</script>

  <title>  Lechance's Blog - The code to change the world </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="en">

  <!--[if lte IE 8]>
  <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;margin:0 auto;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
      <img src="http://7u2nvr.com1.z0.glb.clouddn.com/picouterie.jpg" border="0" height="42" width="820"
           alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today or use other browser ,like chrome firefox safari."
           style='margin-left:auto;margin-right:auto;display: block;'/>
    </a>
  </div>
<![endif]-->
  


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-75174040-1', 'auto');
  ga('send', 'pageview');
</script>


  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?5641a55459d47b98c90f424b8ca53a5a";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <div class="container one-column 
   page-home 
">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">Lechance's Blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu ">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-home fa-fw"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-archive fa-fw"></i> <br />
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-tags fa-fw"></i> <br />
            
            Tags
          </a>
        </li>
      
        
        <li class="menu-item menu-item-links">
          <a href="/links" rel="section">
            
              <i class="menu-item-icon fa fa-link fa-fw"></i> <br />
            
            Links
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-user fa-fw"></i> <br />
            
            About
          </a>
        </li>
      
        
        <li class="menu-item menu-item-rss">
          <a href="/atom.xml" rel="section">
            
              <i class="menu-item-icon fa fa-rss fa-fw"></i> <br />
            
            Rss
          </a>
        </li>
      

      
      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div id="content" class="content">
          
  <section id="posts" class="posts-expand">

    

    
    

    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2016/01/03/variables/" itemprop="url">
                  Variables
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2016-01-03T22:22:52+08:00" content="2016-01-03">
              2016-01-03
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp; In
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Java/" itemprop="url" rel="index">
                    <span itemprop="name">Java</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2016/01/03/variables/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2016/01/03/variables/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2016/01/03/variables/"class="leancloud_visitors"  data-flag-title="Variables">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody">
            
            VariablesAn object stories its stae in fields.
123int cadence = 0;int speed = 0;int gear = 1;
The Java programming language defines te following kinds of variables:

Instance Variables(Non-Static Fiel
            ...
          </span>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2016/01/03/variables/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/12/31/anonymous-classes-of-java/" itemprop="url">
                  Anonymous Classes of Java
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-12-31T23:45:05+08:00" content="2015-12-31">
              2015-12-31
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp; In
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Java/" itemprop="url" rel="index">
                    <span itemprop="name">Java</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/12/31/anonymous-classes-of-java/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/12/31/anonymous-classes-of-java/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/12/31/anonymous-classes-of-java/"class="leancloud_visitors"  data-flag-title="Anonymous Classes of Java">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <h3 id="Anonymous_Classes">Anonymous Classes</h3><p>Anonymous classes enable you to make your code more concise. They enable you to declare and instantiate a class at the same time. They are like local classes except that they do not have a name. Use them if you need to use a local class only once.</p>
<p>This section covers the following topics:</p>
<ul>
<li>Declaring Anonymous Classes</li>
<li>Syntax of Anonymous Classes</li>
<li>Accessing Local Variables of the Enclosing Scope, and Declaring and Accessing Members of the Anonymous Class</li>
<li>Example of Anonymous Classes</li>
</ul>
<h5 id="Declaring_Anonymous_Classes">Declaring Anonymous Classes</h5><p>While local classes are class declarations, anonymous classes are expressions, which means that you define the class in another expression. The following example, HelloWorldAnonymousClasses, uses anonymous classes in the initialization statements of the local variables frenchGreeting and spanishGreeting, but uses a local class for the initialization of the variable englishGreeting:</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">	<span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">HelloWorldAnonymousClasses</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="class"><span class="keyword">interface</span> <span class="title">HelloWorld</span> </span>&#123;</span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greet</span><span class="params">()</span></span>;</span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greetSomeone</span><span class="params">(String someone)</span></span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">sayHello</span><span class="params">()</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="class"><span class="keyword">class</span> <span class="title">EnglishGreeting</span> <span class="keyword">implements</span> <span class="title">HelloWorld</span> </span>&#123;</span><br><span class="line">            String name = <span class="string">"world"</span>;</span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greet</span><span class="params">()</span> </span>&#123;</span><br><span class="line">                greetSomeone(<span class="string">"world"</span>);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greetSomeone</span><span class="params">(String someone)</span> </span>&#123;</span><br><span class="line">                name = someone;</span><br><span class="line">                System.out.println(<span class="string">"Hello "</span> + name);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        HelloWorld englishGreeting = <span class="keyword">new</span> EnglishGreeting();</span><br><span class="line"></span><br><span class="line">        HelloWorld frenchGreeting = <span class="keyword">new</span> HelloWorld() &#123;</span><br><span class="line">            String name = <span class="string">"tout le monde"</span>;</span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greet</span><span class="params">()</span> </span>&#123;</span><br><span class="line">                greetSomeone(<span class="string">"tout le monde"</span>);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greetSomeone</span><span class="params">(String someone)</span> </span>&#123;</span><br><span class="line">                name = someone;</span><br><span class="line">                System.out.println(<span class="string">"Salut "</span> + name);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        HelloWorld spanishGreeting = <span class="keyword">new</span> HelloWorld() &#123;</span><br><span class="line">            String name = <span class="string">"mundo"</span>;</span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greet</span><span class="params">()</span> </span>&#123;</span><br><span class="line">                greetSomeone(<span class="string">"mundo"</span>);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">greetSomeone</span><span class="params">(String someone)</span> </span>&#123;</span><br><span class="line">                name = someone;</span><br><span class="line">                System.out.println(<span class="string">"Hola, "</span> + name);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;;</span><br><span class="line">        englishGreeting.greet();</span><br><span class="line">        frenchGreeting.greetSomeone(<span class="string">"Fred"</span>);</span><br><span class="line">        spanishGreeting.greet();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String... args)</span> </span>&#123;</span><br><span class="line">        HelloWorldAnonymousClasses myApp =</span><br><span class="line">            <span class="keyword">new</span> HelloWorldAnonymousClasses();</span><br><span class="line">        myApp.sayHello();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="Syntax_of_Anonymous_Classes">Syntax of Anonymous Classes</h5><p>As mentioned previously, an anonymous class is an expression. The syntax of an anonymous class expression is like the invocation of a constructor, except that there is a class definition contained in a block of code.</p>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/12/31/anonymous-classes-of-java/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/12/30/css-beginner-tutorial/" itemprop="url">
                  Css Beginner Tutorial
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-12-30T00:28:04+08:00" content="2015-12-30">
              2015-12-30
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp; In
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Web/" itemprop="url" rel="index">
                    <span itemprop="name">Web</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/12/30/css-beginner-tutorial/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/12/30/css-beginner-tutorial/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/12/30/css-beginner-tutorial/"class="leancloud_visitors"  data-flag-title="Css Beginner Tutorial">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <p><strong>CSS</strong>, or <strong>Cascading Styles Sheets</strong>, is a way to style and prsent HTML.  Whereas the HTML is the <strong>meaning</strong> or <strong>content</strong>, the style sheet is the <strong>presentation</strong> of that document.</p>
<p>Styles don’t smell or taste anything like HTML, they have a format of <strong>property:value</strong> and most properties can be applied to most HTML tags.</p>
<h3 id="Contents">Contents</h3><h4 id="Applying_CSS_-_The_different_ways_you_can_apply_CSS_to_HTML"><code>Applying CSS</code> - The different ways you can apply CSS to HTML</h4><blockquote>
<p>There are three ways to apply CSS to HTML tags using the <code>style</code> attribute.</p>
</blockquote>
<ul>
<li><strong>In-line</strong><br>In-line styles are plonked straight into the HTML tags use the <code>style</code> attribute.<br>They look something like this:<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p style="color: read"&gt;text&lt;/p&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>This will make that specific paragraph red.</p>
<p>  But, if you remember, the best-practice approach is that the HTML should be a stand-alone, <strong>presentation free</strong> document, and so in-line styles should be avoided wherever possible.</p>
<ul>
<li><strong>Internal</strong></li>
</ul>
<p>Embeded, or internal, styles are used for the whole page. Inside the <code>head</code> element, the <code>style</code> tags surround all of the styles for the page.</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="doctype">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">title</span>&gt;</span>Css Example<span class="tag">&lt;/<span class="title">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span><br><span class="line">	<span class="tag">p</span><span class="rules">&#123;</span><br><span class="line">		<span class="rule"><span class="attribute">color</span>:<span class="value"> read</span></span>;</span><br><span class="line">	&#125;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">a</span><span class="rules">&#123;</span><br><span class="line">		<span class="rule"><span class="attribute">color</span>:<span class="value"> blue</span></span>;</span><br><span class="line">	&#125;</span></span><br><span class="line"></span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<p>This willl make all of the paragraphs in the page red and all of the links blue.</p>
<p>Although preferable to soiling our HTML with inline presentation, It is similarly usually preferable to keep the HTML and the CSS files separate, and so we are left with our savior…</p>
<ul>
<li><strong>External</strong></li>
</ul>
<p>External styles are used for the whole, mutiple-page website. There is a <strong>separate CSS file</strong>, which will simply look something like:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">p</span><span class="rules">&#123;</span><br><span class="line">	<span class="rule"><span class="attribute">color</span>:<span class="value"> read</span></span>;</span><br><span class="line">&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">a</span><span class="rules">&#123;</span><br><span class="line">	<span class="rule"><span class="attribute">color</span>:<span class="value"> blue</span></span>;</span><br><span class="line">&#125;</span></span><br></pre></td></tr></table></figure>
<p>If this file is saved as “styles.css” in the same directory as your HTML page then it can be linked to in the HTML like this:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="doctype">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="title">title</span>&gt;</span>CSS Example<span class="tag">&lt;/<span class="title">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"style.css"</span>&gt;</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<ul>
<li><h5><p style="color:#8B2"><b>Apply</b></p></h5>

</li>
</ul>
<p>To get the most from this guide, it would be a good idea to try out the code as we go along. so start a fresh new file with your text-editor and save the blank document as “style.css” in the same directory as your HTML file.</p>
<p>Now change your HTML file so that it starts something like this:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="doctype">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="title">title</span>&gt;</span>My first web page<span class="tag">&lt;/<span class="title">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"style.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">head</span>&gt;</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<p>Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work you way throwgh the CSS Beginner Tutrial, you will be able to add to and change the CSS file and  see the results by simply refreshing the browser window that has the HTML file in it, as we did before.</p>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/12/30/css-beginner-tutorial/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/12/23/javascript-html-dom/" itemprop="url">
                  JavaScript HTML DOM
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-12-23T21:55:13+08:00" content="2015-12-23">
              2015-12-23
            </time>
          </span>

          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/12/23/javascript-html-dom/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/12/23/javascript-html-dom/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/12/23/javascript-html-dom/"class="leancloud_visitors"  data-flag-title="JavaScript HTML DOM">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <h4 id="HTML_DOM">HTML DOM</h4><p><strong>When the web page is loaded, the browser will create a document object model of the page.</strong><br><em>HTML DOM Model is constructed as an object tree</em></p>
<p><img src="images/html-dom-tree.png" alt="html-tree"></p>
<p><strong>Through the programmable object model <em>JavaScript</em> was enough to create dynamic HTML</strong></p>
<blockquote>
<ul>
<li>JavaScript can change all the HTML elements on your page</li>
<li>JavaScript can change all the HTML in the page properties</li>
<li>JavaScript can change all the CSS styles in the page</li>
<li>JavaScript to be able to respond to all events page</li>
</ul>
</blockquote>
<h5 id="Finding_HTML_elements">Finding HTML elements</h5><p>Typically, You need to manipulate HTML elements with <em>JavaScript</em><br><em>In order to do this, you must first locate the element, There are three ways to do this:</em></p>
<ul>
<li>HTML element by ID found</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var x =document.getElementById("intro");</span><br></pre></td></tr></table></figure>
<ul>
<li>By label name to find HTML elements</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">First find the id = "main" element,and then look for the "main" all of the elements</span><br><span class="line"></span><br><span class="line">  var x =document.getElementById("main");</span><br><span class="line"></span><br><span class="line">  var y =x.getElementsByTagName("p");</span><br></pre></td></tr></table></figure>
<ul>
<li>Through the class name to find HTML elements</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Find HTML elements by class name is not valid in IE 5,6,7,8</span><br></pre></td></tr></table></figure>
<h5 id="Change_HTML_contents">Change HTML contents</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"id"</span>).innerHTML= <span class="string">"new HTML"</span>;</span><br></pre></td></tr></table></figure>
<h5 id="Change_HTML_attributes">Change HTML attributes</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"id"</span>).src=<span class="string">"landscape.png"</span>;</span><br></pre></td></tr></table></figure>
<h5 id="Change_HTML_CSS_(Cascading_Style_Sheets)">Change HTML CSS (Cascading Style Sheets)</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Syntax:</span><br><span class="line"><span class="built_in">document</span>.getElementById(id).style.property=<span class="string">"new style"</span></span><br></pre></td></tr></table></figure>
<h5 id="Adding_and_Removing_nodes_(HTML_element)">Adding and Removing nodes (HTML element)</h5><hr>
<ul>
<li>Adding node</li>
</ul>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/12/23/javascript-html-dom/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/12/22/merry-christmas/" itemprop="url">
                  Merry Christmas
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-12-22T11:26:27+08:00" content="2015-12-22">
              2015-12-22
            </time>
          </span>

          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/12/22/merry-christmas/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/12/22/merry-christmas/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/12/22/merry-christmas/"class="leancloud_visitors"  data-flag-title="Merry Christmas">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody">
            
            Vimeo


            
          </span>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/12/22/merry-christmas/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/11/10/copy-paste-cut-for-vim/" itemprop="url">
                  Copy Paste Cut for Vim
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-11-10T12:48:26+08:00" content="2015-11-10">
              2015-11-10
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp; In
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Linux/" itemprop="url" rel="index">
                    <span itemprop="name">Linux</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/11/10/copy-paste-cut-for-vim/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/11/10/copy-paste-cut-for-vim/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/11/10/copy-paste-cut-for-vim/"class="leancloud_visitors"  data-flag-title="Copy Paste Cut for Vim">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody">
            
            General UsageCut and Paste
Position the cursor where you want to begin cutting.
Press V to select characters (or uppercase V to select whole lines, or Ctrl-v to select rectangular blocks).
Move the cu
            ...
          </span>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/11/10/copy-paste-cut-for-vim/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/08/19/400px-api-readme/" itemprop="url">
                  500px api-readme
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-08-19T21:26:40+08:00" content="2015-08-19">
              2015-08-19
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp; In
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Programming/" itemprop="url" rel="index">
                    <span itemprop="name">Programming</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/08/19/400px-api-readme/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/08/19/400px-api-readme/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/08/19/400px-api-readme/"class="leancloud_visitors"  data-flag-title="500px api-readme">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <h1 id="500px_API">500px API</h1><p>500px API provides programmatic access to 500px functionality and content.<br>Version 1 of the API is limited to the essentials of the website’s functionality: viewing feature streams, photo information and comments, as well as user profiles.</p>
<p>The API is <a href="http://en.wikipedia.org/wiki/Representational_State_Transfer" title="RESTful">REST API</a><br>and uses <a href="http://oauth.net/" title="OAuth">OAuth</a> 1.0a for user authentication purposes.<br>Currently, return format for all endpoints is <a href="http://json.org/" title="JSON">JSON</a>.</p>
<p>You can try our API in <a href="http://bitly.com/api500px">console</a> (<a href="http://bitly.com/api500px">http://bitly.com/api500px</a>)</p>
<p>See <a href="http://status.500px.com">status.500px.com</a> for API status updates, outages, and scheduled maintenance.</p>
<hr>
<h2 id="Checklist">Checklist</h2><ul>
<li><a href="http://bitly.com/api500px">Try the API console</a></li>
<li><a href="https://github.com/500px/api-documentation#what-do-i-need-to-know-before-i-start-using-the-api">See if the concepts used by the API are familiar to you</a></li>
<li>Familiarize yourself with API functionality</li>
<li>Read the 500px <a href="https://github.com/500px/api-documentation/blob/master/basics/terms_of_use.md">API Terms of Use</a></li>
<li><a href="http://500px.com/settings/applications">Register your application</a> and get OAuth consumer key and secret</li>
<li>Hack away</li>
</ul>
<hr>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/08/19/400px-api-readme/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/posts/2015/06/28/markdown-overview/" itemprop="url">
                  Markdown
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            Posted on
            <time itemprop="dateCreated" datetime="2015-06-28T02:32:22+08:00" content="2015-06-28">
              2015-06-28
            </time>
          </span>

          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/2015/06/28/markdown-overview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/2015/06/28/markdown-overview/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          
		  
		  
			 &nbsp; | &nbsp;
			 <span id="/posts/2015/06/28/markdown-overview/"class="leancloud_visitors"  data-flag-title="Markdown">
             &nbsp;Views
            </span>
		  
		
        </div>
      </header>
    


    <div class="post-body">

      
      

      
        
          <h2 id="Markdown">Markdown</h2><p><em>Before I start to write a blog, I wourld like to do some <strong>Markdown</strong> syntax summary. I think only of this “pen” very skilled master, I can write code to change the world. So, get started.</em></p>
<h4 id="INTRODUCTION">INTRODUCTION</h4><p>Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to wirte using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). For more detailed information of <em>Markdown</em> visit <a href="http://daringfireball.net/projects/markdown/">markdown</a> website.</p>
<h4 id="Syntax_Cheatsheet:">Syntax Cheatsheet:</h4><h5 id="Phrase_Emphasis">Phrase Emphasis</h5><pre><code><span class="keyword">*</span>italic<span class="keyword">*</span>    <span class="keyword">*</span><span class="keyword">*</span>bold<span class="keyword">*</span><span class="keyword">*</span>
_italic_    __bold__
</code></pre><h5 id="Links">Links</h5><p>Inline:</p>
<pre><code>An [<span class="link_label">example</span>](<span class="link_url">http://url.com/ "title"</span>)
</code></pre><p> Reference-style labels (titles are optional)</p>
<pre><code>An [<span class="link_label">example</span>][<span class="link_reference">id</span>]. Then, anywhere else in the doc, define te link:

<span class="code">        [id]: https://example.com/ "title"</span>
</code></pre><h5 id="Images">Images</h5><p>Inline (title are optional):</p>
<pre><code>![<span class="link_label">alt text</span>](<span class="link_url">/path/img.png "title"</span>)
</code></pre><p>Reference-style:</p>
<pre><code>![<span class="link_label">alt text</span>][<span class="link_reference">id</span>]
[<span class="link_reference">id</span>]:<span class="link_url">/url/to/img.png "title"</span>
</code></pre>
          <div class="post-more-link text-center">
            <a class="btn" href="/posts/2015/06/28/markdown-overview/#more" rel="contents">
              Read more &raquo;
            </a>
          </div>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    

  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/4/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/6/"><i class="fa fa-angle-right"></i></a>
  </nav>



        </div>

        


        

      </div>

      
        
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel  sidebar-panel-active ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" src="/upload/image/avatar.png" alt="Lechance Cheung" itemprop="image"/>
          <p class="site-author-name" itemprop="name">Lechance Cheung</p>
        </div>
        <p class="site-description motion-element" itemprop="description">The code to change the world</p>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">43</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>

          <div class="site-state-item site-state-categories">
            
              <span class="site-state-item-count">15</span>
              <span class="site-state-item-name">categories</span>
              
          </div>

          <div class="site-state-item site-state-tags">
            <a href="/tags">
              <span class="site-state-item-count">66</span>
              <span class="site-state-item-name">tags</span>
              </a>
          </div>

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/lechance" target="_blank">
                  
                    <i class="fa fa-weibo"></i> Weibo
                  
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://github.com/lechance" target="_blank">
                  
                    <i class="fa fa-globe"></i> Github
                  
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://guides.github.com/features/mastering-markdown/" target="_blank">
                  
                    <i class="fa fa-globe"></i> MD CheatSheet
                  
                </a>
              </span>
            
          
        </div>

        
        
          <div class="cc-license motion-element" itemprop="license">
            <a href="http://creativecommons.org/licenses/by-nc-sa/4.0" class="cc-opacity" target="_blank">
              <img src="/images/cc-by-nc-sa.svg" alt="Creative Commons" />
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            <p class="site-author-name">Common Sites</p>
            
              <span class="links-of-author-item">
                <a href="https://developers.google.cn" target="_blank">Google Developers</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://androidweekly.net/archive" target="_blank">Android Weekly</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://rxjava.yuxingxin.com" target="_blank">RxJava Essentials</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hc.apache.org/index.html" target="_blank">Http Components</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://simpledeveloper.com" target="_blank">Simple Developer</a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.ibm.com/developerworks/library" target="_blank">IBM(Technical Library)</a>
              </span>
            
          
        </div>

      </section>

      

    </div>
  </aside>


      
    </main>

    <footer id="footer" class="footer">
      <div class="google-ad">
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- myblogfootergooglead -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-6226577131784709"
     data-ad-slot="6824128270"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

      </div>
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="icon-next-heart fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lechance Cheung</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="http://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT
  </a>
</div>

<span id="busuanzi_container_site_pv">
  &nbsp; | &nbsp;PV <span id="busuanzi_value_site_pv"></span> &nbsp;| &nbsp;UV <span id="busuanzi_value_site_uv"></span>
</span>



      </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  

  
    

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"lechance"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//lechance.github.io/embed_ua.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>
    
     


    
  

  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/js/fancy-box.js?v=0.4.5.2"></script>


  <script type="text/javascript" src="/js/helpers.js?v=0.4.5.2"></script>
  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>
<script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

<script type="text/javascript" src="/js/motion.js?v=0.4.5.2" id="motion.global"></script>


  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  

  <script type="text/javascript" src="/js/bootstrap.js"></script>

  
  

  
  
  
  
  	 <!-- custom analytics part create by xiamo -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("cHqcCBDQtcbkltuUTyplEYWJ-gzGzoHsz", "SkioJGixXR48ACpgA0W2lOWd");</script>
<script>
function showTime(Counter) {
	var query = new AV.Query(Counter);
	$(".leancloud_visitors").each(function() {
		var url = $(this).attr("id").trim();
		query.equalTo("url", url);
		query.find({
			success: function(results) {
				if (results.length == 0) {
					var content = '0 ' + $(document.getElementById(url)).text();
					$(document.getElementById(url)).text(content);
					return;
				}
				for (var i = 0; i < results.length; i++) {
					var object = results[i];
					var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
					$(document.getElementById(url)).text(content);
				}
			},
			error: function(object, error) {
				console.log("Error: " + error.code + " " + error.message);
			}
		});

	});
}

function addCount(Counter) {
	var Counter = AV.Object.extend("Counter");
	url = $(".leancloud_visitors").attr('id').trim();
	title = $(".leancloud_visitors").attr('data-flag-title').trim();
	var query = new AV.Query(Counter);
	query.equalTo("url", url);
	query.find({
		success: function(results) {
			if (results.length > 0) {
				var counter = results[0];
				counter.fetchWhenSave(true);
				counter.increment("time");
				counter.save(null, {
					success: function(counter) {
						var content =  counter.get('time') + ' ' + $(document.getElementById(url)).text();
						$(document.getElementById(url)).text(content);
					},
					error: function(counter, error) {
						console.log('Failed to save Visitor num, with error message: ' + error.message);
					}
				});
			} else {
				var newcounter = new Counter();
				newcounter.set("title", title);
				newcounter.set("url", url);
				newcounter.set("time", 1);
				newcounter.save(null, {
					success: function(newcounter) {
					    console.log("newcounter.get('time')="+newcounter.get('time'));
						var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
						$(document.getElementById(url)).text(content);
					},
					error: function(newcounter, error) {
						console.log('Failed to create');
					}
				});
			}
		},
		error: function(error) {
			console.log('Error:' + error.code + " " + error.message);
		}
	});
}
$(function() {
	var Counter = AV.Object.extend("Counter");
	if ($('.leancloud_visitors').length == 1) {
		addCount(Counter);
	} else if ($('.post-title-link').length > 1) {
		showTime(Counter);
	}
}); 
</script>
  
  
</body>
</html>
